<template>
	<view>
		<u-sticky :h5-nav-height="0" :bg-color="'transparent'">
			<view class="sticky-bg">
				<u-navbar title-bold :is-fixed="false" :titleSize="30" title="蓝豹商学" :border-bottom="false"
					:background="{
					background:'#D6EEFF'
				}" title-color="#2F3033">
				</u-navbar>
				<u-search wrapBgColor="#D6EEFF" bgColor="#F5F5F5" placeholder="请输入关键词" v-model="keyword" :hideRight="true"  @search="searchFun" @custom="searchFun" @clear="searchFun"></u-search>
				<view class="u-flex-1  nav u-padding-top-20" v-if="categoryList.length">
					<swiper :display-multiple-items="6" ref="menu" :style="'height: 140rpx;'" @change="swiperChange">
						<swiper-item class="u-text-center" :class="{'select':active == -1}" @tap.stop="changeActive(-1)">
							<image class="nav-icon" src="https://resource.lanbaozixun.com/uploads/images/20240811212426fbcc28895.png"></image>
							<view class="name xs u-line-1">全部</view>
						</swiper-item>
						<swiper-item class="u-text-center" :class="{'select':active == index}"
							v-for="(item, index) in categoryList" :key="index" @tap.stop="changeActive(index)">
							<image class="nav-icon" :src="item.icon"></image>
							<view class="name xs u-line-1">{{item.name}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</u-sticky>
		<!-- pages/news_list/news_list.wxml -->
		<view class="news_list">
			<view class="contain">
				<view class="main">
					<view class="article-list">
						<view class="bg-white">
							<swipers :pid="type ? 10 : 12" height="160rpx" radius="0rpx" padding="30rpx 30rpx 10rpx 30rpx"></swipers>
						</view>
						<view v-for="(item, index) in newsList" :key="index" :data-id="item.id"
							class="article-item bg-white u-flex u-col-center" @tap="goPage">
							<view class=" u-flex-1">
								<view class="row">
									<view class="info">
										<view class="title md line2 mb20">{{ item.title }}</view>
										<view class="u-color-333333 xs line2">
											<view>{{ item.synopsis }}</view>
										</view>
									</view>
								</view>
								<view class="row-between mt20 u-color-666666">
									<view class="xs ">发布时间: {{item.create_time}}</view>
									<view class="row">
										<u-icon name="eye" color="#999999" size="24"></u-icon>
										<view class="ml10 xs u-color-666666">{{ item.visit }}</view>
									</view>
								</view>
							</view>
							<image width="240rpx" height="200rpx" lazy-load class="img" :src="item.image" />
						</view>
					</view>
					<loading-footer :status="status" slotEmpty>
						<view slot="empty" class="column-center" style="padding-top: 100rpx">
							<image class="img-null" src="/static/images/news_null.png"></image>
							<text class="nr muted">暂无数据～</text>
						</view>
					</loading-footer>
				</view>
			</view>
		</view>
		<!-- <loading-view v-if="showLoading"></loading-view> -->
	</view>
</template>

<script>
	import {
		getCategoryList,
		getArticleList
	} from '@/api/new';
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from '@/utils/tools'

	export default {
		data() {
			return {
				id:'',
				active: -1,
				keyword:'',
				showLoading: true,
				categoryList: [],
				newsList: [],
				page: 1,
				status: loadingType.LOADING,
				bannerList: [],
				type: 0,
				showAd: false
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			//分类id
			this.id = options.id; //type存在则为帮助中心

			this.type = options.type || '';

			if (this.type) {
				uni.setNavigationBarTitle({
					title: '帮助中心'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '商城资讯'
				});
			}
			this.showAd = true
			this.getCategoryListFun();
		},

		onReachBottom: function() {
			this.getArticleListFun();
		},


		methods: {
			changeActive(e) {
				this.active = e;
				this.page = 1;
				this.newsList = [];
				this.status = loadingType.LOADING
				setTimeout(() => {
					this.getArticleListFun();
				}, 100);
			},

			getCategoryListFun() {
				getCategoryList({
					type: this.type
				}).then(res => {
					if (res.code == 1) {
						this.categoryList = res.data
						if(!this.$u.test.isEmpty(this.id))this.active = res.data.findIndex(item => item.id == this.id)
						this.getArticleListFun();
					}
				});
			},
			searchFun(){
				this.page = 1;
				this.newsList = []
				this.status = loadingType.LOADING;
				this.getArticleListFun()
			},

			getArticleListFun() {
				let {
					active,
					page,
					newsList,
					status,
					keyword
				} = this;
				let id = '';
				if (this.categoryList[active != -1 ? active : ''] && this.categoryList[active != -1 ? active : ''].id) {
					id = this.categoryList[active != -1 ? active : ''].id;
				}
				loadingFun(getArticleList, page, newsList, status, {
					type: this.type,
					id: id,
					page_no: page,
					keyword:keyword
				}).then(res => {
					if (res) {
						this.page = res.page;
						this.newsList = res.dataList
						this.status = res.status
					}
				})
			},

			goPage(e) {
				let {
					id
				} = e.currentTarget.dataset;
				uni.navigateTo({
					url: `/pages/news_details/news_details?id=${id}&type=${this.type}`
				});
			}

		}
	};
</script>
<style lang="scss">
	page{
		background:linear-gradient(180deg, #D6EEFF 0%, #FFFFFF 54.75%, #FFFFFF 100%);
		
		.nav {
			position: relative;
			border-radius: 14rpx 14rpx 0 0;
			border-top: 2rpx solid white;
			background: #D6EEFF;
			
			.select{
				.nav-icon {
					border-color: rgba(109, 206, 247, 0.59);
				}
				
				.name{
					font-weight: 500;
				}
			}
		
			.nav-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 36rpx;
				border: 4rpx solid transparent;
				background: transparent;
			}
		
			.name {
				width: 100%;
				padding: 3rpx 0;
			}
		}
	}
	
	
	/* pages/information/information.wxss */
	.news_list {
		.main {
			.article-list {
				border-radius: 20rpx;
				overflow: hidden;

				.article-item {
					padding: 20rpx;
					border-bottom: var(--border);

					.info {
						flex: 1;
					}

					.img {
						width: 240rpx;
						height: 160rpx;
						flex: none;
						margin-left: 43rpx;
						border-radius: 20rpx;
					}
				}

				&:last-of-type {
					border: none;
				}
			}
		}

		.footer {
			padding: 30rpx 0;
		}
	}

	page .van-tabs .van-tab--active {
		color: #333;
	}


	.news_list .van-tab {
		width: 25%;
		flex: none;
	}
</style>